"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/31
 */
import * as React from 'react'
import {MySegmentControlProps} from "../interface/index";
import MyText from "./MyText";
import {commonStyles} from "../assets/styles/common";
import {segmentStyles} from "../assets/styles/segment";

const {View, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');

class MySegmentControl extends React.Component<MySegmentControlProps, any> {
    static defaultProps = {
        color: '#fff',
        tintColor: '#000',
        selectedIndex: 3,
        values: [],
        style: null,
        onChange:null,
    };


    constructor(props: MySegmentControlProps, context: any) {
        super(props, context);
        this.state = {
            currentIndex: props.selectedIndex,
        }
    }

    onItemPress(currentIndex) {
        this.setState({currentIndex});
        this.props.onChange&&this.props.onChange(currentIndex);
    }

    getContainerStyle() {
        const {values, tintColor, color, height} = this.props;
        return {
            flex: 1,
            height
        };
    };

    getItemStyle(index) {
        const {values, tintColor, color, height} = this.props;
        const {currentIndex} = this.state;
        let styles = {};
        styles['backgroundColor'] = currentIndex === index ? tintColor : color;
        //borderTopLeftRadius
        // borderBottomLeftRadius
        //borderTopRightRadius
        //borderBottomRightRadius
        //borderWidth
        //borderColor
        styles['borderTopWidth'] = 1;
        styles['borderTopColor'] = tintColor;
        styles['borderBottomWidth'] = 1;
        styles['borderBottomColor'] = tintColor;
        if (index == 0) {
            styles['borderTopLeftRadius'] = 5;
            styles['borderBottomLeftRadius'] = 5;
            styles['borderLeftWidth'] = 1;
            styles['borderLeftColor'] = tintColor;
        } else if (index === values.length - 1) {
            styles['borderTopRightRadius'] = 5;
            styles['borderBottomRightRadius'] = 5;
            styles['borderRightWidth'] = 1;
            styles['borderRightColor'] = tintColor;
            styles['borderLeftWidth'] = 1;
            styles['borderLeftColor'] = tintColor;
        } else {
            styles['borderLeftWidth'] = 1;
            styles['borderLeftColor'] = tintColor;
        }
        return styles;
    }

    getItemTextStyle(index) {
        const {values, tintColor, color, height} = this.props;
        const {currentIndex} = this.state;

        let styles = {};
        styles['color'] = currentIndex !== index ? tintColor : color;
        return styles;
    }

    render() {
        const {values, style} = this.props;
        return (
            <View style={[style, commonStyles.flexRow, segmentStyles.container, {...this.getContainerStyle()}]}>
                {values.map((item, index) => (
                    <TouchableOpacity key={index}
                                      activeOpacity={0.9}
                                      style={[commonStyles.flex1]}
                                      onPress={this.onItemPress.bind(this, index)}>
                        <View style={[commonStyles.flex1, segmentStyles.item, {...this.getItemStyle(index)}]}>
                            <MyText style={[{...this.getItemTextStyle(index)}]}>{item}</MyText>
                        </View>
                    </TouchableOpacity>))}
            </View>
        );
    }
}


export default MySegmentControl;